<%@ include file="/html/portlet/ext/search/init.jsp" %>

<script src="/html/js/liferay/ext_service.js" type="text/javascript"></script>
<script src="/html/js/liferay/dynamic_select.js" type="text/javascript"></script>
<script src="/html/js/liferay/service.js" type="text/javascript"></script>

<%
	int countryId=108;
	int regionId=0;
	int cityId=0;
	Integer search_category = 1;
%>

<script type="text/javascript">

	jQuery(
		function () {
			new Liferay.DynamicSelect(
				[
					{
						select: "countryId",
						selectId: "countryId",
						selectDesc: "name",
						selectVal: "<%= countryId %>",
						selectData: function(callback) {
							Liferay.Service.Portal.Country.getCountries(
								{
									active: true
								},
								
								function(data, status) {
									var myselect = document.getElementById("countryId");
									myselect.length = 0;
													 
									try{		
										myselect.add(new Option("--Select--",""),myselect.options[0]);
									}
									catch(e) {
										myselect.add(new Option("--Select--", ""),0);
									} 
						
									for (var i = 1; i <= data.length; i++) {
										myselect.options[i] = new Option(data[i-1].name,i);
										myselect.options[i].value = data[i-1].countryId;
										
										if (data[i-1].countryId == '<%= countryId %>') {
											myselect.selectedIndex = i;
										}
									}
								}
							);
						}
					},
					{
						select: "regionId",
						selectId: "regionId",
						selectDesc: "name",
						selectVal: "<%= regionId %>",
						selectData: function(callback, selectKey) {
							Liferay.Service.Portal.Region.getRegions(
								{
									countryId: selectKey,
									active: true
								},
								
								function(data, status) {
									var myselect = document.getElementById("regionId");
									myselect.length = 0;	
												 
									try{		
										myselect.add(new Option("--Select--",""),myselect.options[0]);
									}
									catch(e) {
										myselect.add(new Option("--Select--", ""),0);
									} 
									for (var i = 1; i <= data.length; i++) {
										myselect.options[i] = new Option(data[i-1].name,i);
										myselect.options[i].value = data[i-1].regionId;
										
										if (data[i-1].regionId == '<%= regionId %>') {
											myselect.selectedIndex = i;
										}
									}
								}
							);
						}
					},
					{ 
						select: "cityId",
						selectId: "cityId",
						selectDesc: "name",
						selectVal: "<%= cityId %>",
						selectData: function(callback, selectKey) {
							Liferay.Service.Service.City.getCities(
								{
									regionId: selectKey
								},
								
								function(data, status) {
									
									var myselect = document.getElementById("cityId");
									myselect.length = 0;		
											 
									try{		
										myselect.add(new Option("--Select--",""),myselect.options[0]);
									}
									catch(e) {
										myselect.add(new Option("--Select--", ""),0);
									} 
					
									for (var i = 1; i <= data.length; i++) {
										myselect.options[i] = new Option(data[i-1].name,i);
										myselect.options[i].value = data[i-1].cityId;
										
										if (data[i-1].cityId == '<%= cityId %>') {
											myselect.selectedIndex = i;
										}
									}
								}
							);
						}
					}
				]
			);
		}
	);
</script>

<c:choose>
	<c:when test='<%= Validator.isNotNull(search_category) && search_category ==1 %>'>
		<form action="" method="POST" name="<portlet:namespace />fm"> 
			<table class="taglib-search-iterator" style="width:100%" cellspacing="0" cellpadding="2">
				<tr class='results-header'>
					<th><liferay-ui:message key="First Name" /></th>
					<th><liferay-ui:message key="Country" /></th>
					<th><liferay-ui:message key="State" /></th>
					<th><liferay-ui:message key="City" /></th>
				</tr>
				<tr class='results-header'>
					<td>
						<input type="text" name="<portlet:namespace />name" style="width:120px" >
					</td>
					<td>
						<select id="countryId" name="<portlet:namespace />countryId" style="width:120px" ></select>
					</td>
					<td>
						<select id="regionId" name="<portlet:namespace />regionId" style="width:120px" ></select>
					</td>
					<td>
						<select id="cityId" name="<portlet:namespace />cityId" style="width:120px" ></select>
					</td>
				</tr>
			</table>
		</form>
	</c:when>
	
	<c:when test='<%= Validator.isNotNull(search_category) && search_category ==2 %>'>
		<form action="" method="POST" name="<portlet:namespace />fm"> 
			<table class="taglib-search-iterator" style="width:100%" cellspacing="0" cellpadding="2">
				<tr class='results-header'>
					<th><liferay-ui:message key="Last Name" /></th>
					<th><liferay-ui:message key="Country" /></th>
					<th><liferay-ui:message key="State" /></th>
					<th><liferay-ui:message key="City" /></th>
				</tr>
				<tr class='results-header'>
					<td>
						<input type="text" name="<portlet:namespace />name" style="width:120px" >
					</td>
					<td>
						<select id="countryId" name="<portlet:namespace />countryId" style="width:120px" ></select>
					</td>
					<td>
						<select id="regionId" name="<portlet:namespace />regionId" style="width:120px" ></select>
					</td>
					<td>
						<select id="cityId" name="<portlet:namespace />cityId" style="width:120px" ></select>
					</td>
				</tr>
			</table>
		</form>
	</c:when>
	
</c:choose>